<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>库存采购单</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="create-warehouse">
      <div>
        <search-btn-view immediate btn-text="物料查询" @before-open="resetSearch" @search="searchData">
          <template slot="append">
            <el-button size="medium" type="primary" @click="purchaseMaterial">采购</el-button>
            <el-button size="medium" type="primary" @click="addMaterial">新增物料</el-button>
          </template>
          <div slot="search-content">
            <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:4}" :search="search"
              :search-field="searchField" label-width="calc(4em + 12px)" input-width="180px" :dropdown-props="{colorDescription:'描述'}">
            </sys-common-search>
          </div>
        </search-btn-view>
      </div>
      <div class="create-warehouse-table-div">
        <el-table fit stripe border ref="materialTable" :data="materialList" style="width: 100%" height="parent" @select="toSelectMaterial"
          @select-all="toSelectMaterial">
          <el-table-column :resizable="false" type="selection" width="40px" align="center"></el-table-column>
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="model" label="规格型号" min-width="90px" header-align="center"></el-table-column>
          <el-table-column prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="colorDescription" label="描述" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="providerNo" label="供方编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialDeptName" label="物料部门" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="unit" label="单位" min-width="60px" align="center"></el-table-column>
          <el-table-column prop="unitPrice" label="单价" min-width="90px" align="center"></el-table-column>
          <el-table-column prop="stockTurnover" label="库存周转量" min-width="120px" align="center"></el-table-column>
          <el-table-column prop="count" label="库存" min-width="120px" align="center"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="新增物料" :visible.sync="openAddDialog" top="10vh" @closed="addDialogClosed">
      <div style="height: calc(80vh - 54px); overflow: auto">
        <company-material-form v-if="openAddDialog" :company-material="addMaterialData" :dropdown-option="dropdownOption" @add="addMaterialSuccess">
        </company-material-form>
      </div>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" title="采购物料" :visible.sync="openPurchaseMaterialDialog">
      <div style="height:100%;overflow:auto">
        <purchase-material-form v-if="openPurchaseMaterialDialog" :materials="selectMaterials" :user="user" :option="purchaseMaterialOption"
          @purchaise-success="purchaiseSuccess">
        </purchase-material-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/imgUpload.css",
    "../companyMaterialTable/css/companyMaterialForm.css",
    "./css/purchaseMaterialForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/js/dropdownUtil.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/tableDealerSelect.js",
    "/vueSystem/components/filterSelect.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="../models/customerModel.js"></script>
<script src="../models/companyMaterialTableModel.js"></script>
<script src="../models/warehouseMaterialModel.js"></script>
<script src="../customer/customerForm.js"></script>
<script src="../companyMaterialTable/companyMaterialForm.js"></script>
<script src="./purchaseMaterialForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        colorDecription: '',
        providerName: '',
        materialDept: '',
        materialType: '',
        providerNo: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        searchField: ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'providerNo', 'materialDept'],
        materialList: [],
        openAddDialog: false,
        openPurchaseMaterialDialog: false,
        addMaterialData: null,
        dropdownOption: {},
        selectMaterials: [],
        purchaseMaterialOption: {},
        user: null,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      SysUtil.getUser().then(function (user) {
        self.user = user;
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
        };

        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'providerNo'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest("companyMaterial/getMaterialDate", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          materialList = _.map(materialList, function (material) {
            material = new WarehouseMaterialModel(material);
            return material;
          });

          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;

          self.$nextTick(function () {
            self.toInitSelectMaterial();
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toInitSelectMaterial: function () {
        var materialTable = this.$refs['materialTable']
        if (!materialTable) {
          return;
        }

        var materialList = this.materialList;
        var selectMaterials = this.selectMaterials;
        var ids = _.map(selectMaterials, 'id');
        for (var i = 0; i < materialList.length; i++) {
          var material = materialList[i];
          if (ids.indexOf(material.id) !== -1) {
            materialTable.toggleRowSelection(material, true);
          }
        }
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      addMaterial: function () {
        this.addMaterialData = new CompanyMaterialTable();
        this.openAddDialog = true;
      },

      addMaterialSuccess: function () {
        this.openAddDialog = false;
        this.setMaterialList();
      },

      addDialogClosed: function () {
        this.addMaterialData = null;
      },

      toSelectMaterial: function (selectMaterialList) {
        var selectMaterials = this.selectMaterials;
        var materialList = this.materialList;
        materialList = _.differenceBy(materialList, selectMaterialList, 'id');
        selectMaterials = _.differenceBy(selectMaterials, materialList, 'id');
        selectMaterials = _.unionBy(selectMaterials, selectMaterialList, 'id');
        this.selectMaterials = selectMaterials;
      },

      purchaseMaterial: function () {
        var selectMaterials = this.selectMaterials;
        if (selectMaterials.length === 0) {
          this.$alert('请选择需要采购的物料', '信息');
          return;
        }
        this.openPurchaseMaterialDialog = true;
      },

      purchaiseSuccess: function () {
        this.openPurchaseMaterialDialog = false;
        this.selectMaterials = [];
        this.$refs['materialTable'].clearSelection();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch,
      CompanyMaterialForm: CompanyMaterialForm,
      PurchaseMaterialForm: PurchaseMaterialForm
    }
  });

</script>
<style>
  .create-warehouse {
    height: calc(100% - 15px);
    padding: 10px 20px 5px;
    display: flex;
    flex-direction: column;
  }

  .create-warehouse .create-warehouse-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
